<template>
  <div class="ma-content-block">
    <!-- CRUD 组件 -->
    <a-layout-content class="flex flex-col lg:h-full relative w-full">
      <a-card :bordered="false">
        <div>
          <template v-if="showSearch">
            <a-row>
              <a-col :flex="1">
                <a-form :model="searchForm" ref="searchFormRef" :auto-label-width="true">
                  <a-row :gutter="10">
                    <a-col :span="8">
                      <a-form-item field="from" label="链路ID">
                        <a-input v-model="searchForm.trade_id" placeholder="请输入链路ID" allow-clear/>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item field="email" label="消息体">
                        <a-input v-model="searchForm.message" placeholder="请输入消息体" allow-clear/>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </a-col>
              <a-divider v-if="!singleLine" style="height: 84px" direction="vertical"/>
              <a-col :flex="singleLine ? '185px' : '80px'" :style="{ textAlign: 'right' }">
                <a-space :direction="!singleLine ? 'vertical' : 'horizontal'" :size="singleLine ? 10 : 20">
                  <a-button type="primary" @click="search">
                    <template #icon>
                      <icon-search/>
                    </template>
                    {{ options.searchText || '搜索' }}
                  </a-button>
                  <a-button @click="resetSearch">
                    <template #icon>
                      <icon-refresh/>
                    </template>
                    {{ options.resetText || '重置' }}
                  </a-button>
                </a-space>
              </a-col>
            </a-row>
            <a-divider style="margin-top: 0; margin-bottom: 15px"/>
          </template>
        </div>


        <a-card :bordered="false" v-for="(item) in tableData.data">
          <a-row v-for="(cItem , key) in item" :key="item.id" :gutter="10">
            <a-col :span="4">
              <a-typography-text>{{ key }}</a-typography-text>
            </a-col>
            <a-col :span="20">
              <a-typography-text v-html="formatStr(cItem)" style="white-space: pre-wrap"></a-typography-text>
            </a-col>
          </a-row>
        </a-card>

        <div class="mt-2 text-right" v-if="tableData.total > 0">
          <a-pagination
              :total="tableData.total"
              show-total
              show-jumper
              show-page-size
              :page-size-options="options.pageSizeOption"
              @page-size-change="pageSizeChangeHandler"
              @change="pageChangeHandler"
              v-model:current="requestParams['page']"
              :page-size="requestParams['limit']"
              style="display: inline-flex" />
        </div>
      </a-card>
    </a-layout-content>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import runtimeLog from '@/api/system/runtimeLog'
import defaultOptions from '@/components/sa-table/defaultOptions.js'

const crudRef = ref()
const singleLine = ref(true)
const showSearch = ref(true)

const searchForm = ref({
  message: '',
  trade_id: '',
  login_time: [],
  orderBy: 'create_time',
  orderType: 'desc',
})
const requestParams = ref({
  page: 1,
  limit: 10,
})

const tableData = reactive({
  total: 0,
  data: [],
  pageSize:10

})

const options = reactive({
  api: runtimeLog.getPageList,
  rowSelection: {showCheckedAll: true},
  operationColumnWidth: 100,
  ...defaultOptions
})

const columns = reactive([
  {title: '操作用户', dataIndex: 'username', width: 150},
  {title: '业务名称', dataIndex: 'service_name', width: 150},
  {title: '路由', dataIndex: 'router', width: 240},
  {title: '操作IP', dataIndex: 'ip', width: 150},
  {title: '操作地点', dataIndex: 'ip_location', width: 150},
  {title: '操作时间', dataIndex: 'create_time', width: 180},
])

const initPage = async () => {
  requestParams.value['page'] = 1
  requestParams.value['limit'] = 10
}

const refresh = async () => {
  return  search()
}

const search = async () => {
  const params = {...searchForm.value , ...requestParams.value}
  runtimeLog.getRuntimeLogPageList(params).then((res) => {
    tableData.data = res.data.data
    tableData.total = res.data.total
  })
}

const resetSearch = async () => {

}

const formatStr = (str) => {
  if (typeof str === 'string') {
    str = str.replace(/\\r\\n/g, '<br/>')
    str = str.replace(/\\n/g, '<br/>')
    str = str.replace(/\\t/g, '    ')
  }
  return str
}

// 页码变化
const pageChangeHandler = async (currentPage) => {
  requestParams.value['page'] = currentPage
  await refresh()
}

// 每页数量变化
const pageSizeChangeHandler = async (pageSize) => {
  requestParams.value['page'] = 1
  requestParams.value['limit'] = pageSize
  await refresh()
}


onMounted(async () => {
  initPage()
  refresh()
})


</script>

<style scoped>
:deep(.arco-collapse-item-content) {
  padding-left: 10px;
  padding-right: 10px;
}
</style>
